<template>
  <view class="content">
    <view style="display: flex; align-items: center">
      <image src="@/static/icon_laba.png" class="icon"></image>

      <swiper class="swiper" :autoplay="true" :duration="300" circular :interval="1000" vertical>
        <swiper-item v-for="(item, index) in pageList" :key="index">
          <view style="display: flex; align-items: center; height: 100%"> {{ item.title }} </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getOneTemplate } from "@/utils/api";

const pageList = ref([
  {
    title: "138****0653用户下单成功！",
  },
  {
    title: "156****8888用户下单成功！",
  },
  {
    title: "178****9387用户下单成功！",
  },
]);

const jsonPage = ref([]);

const props = defineProps({
  // 列表内容
  jsonPage: {
    type: Object,
    default: () => {},
  },
});

watch(
  () => props.jsonPage,
  () => {
    jsonPage.value = props.jsonPage;
  }
);
</script>

<style lang="scss" scoped>
.content {
  // width: 100%;
  height: 70rpx;
  padding-left: 30rpx;
  background-color: white;
}

.swiper {
  height: 70rpx;
  flex: 1;
  font-size: 28rpx;
  margin-left: 10px;
}

.icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
